import {useState,useEffect} from  'react'
// 使用useState模拟状态 useEffect模式生命周期
function fetchData(page=1){
  return fetch("http://dida100.com/mi/list.php?page="+page)
  .then(res=>res.json())
}
function App() {
  // 定义count数据，和设置Count的方法，默认count的值为5
  // count名字，setCount是自己随意定的后面是方法前面是数据
  const[count,setCount] = useState(5)
  // list笑话列表数，setList设置笑话列表数据。默认类别值为空
  const[list,setList] = useState([])
  useEffect(()=>{
    // console.log("组件已经挂载完毕：ajax，dom操作，定时器，事件挂载")
   fetchData()
   .then(res=>{
    setList(res.result)    
   })
  },[])
  // 模拟count,list的更新
  // useEffect(()=>{
  //   console.log("count已经更新")
  // },[count,list])
  useEffect(()=>{
    console.log("任意数据的更新")
  })
  

  return ( <div>
    <h3>函数组件；无状态组件</h3>
    <button onClick={()=>setCount(count+2)}>{count}</button>
    {
      // docid与summary来自数据的字段
      list.map(item=><p key={item.docid}>{item.summary}</p>)
    }
  </div> );
}

export default App;